<template>
	<div @click="closeSel" style="position: fixed;width: 100%;">

		<Navigation></Navigation>

		<div id="main"
			style="height: calc(100vh - 70px);width: 25%;background-color: #FFFFFF;position: absolute;z-index: 900;box-shadow: 0px 0px 15px -15px rgba(0, 0, 0,0.1);">

			<div id="query"
				style="padding-left: 20px;padding-right: 20px;background-color: #FFFFFF;padding-top: 30px;padding-bottom: 30px;">
				<div style="margin-bottom: 30px;">
					<span style="font-size: 25px;font-weight: 900;">探索精彩世界</span>
				</div>

				<div>
					<div style="margin-bottom: 10px;font-size: 15px;">出行区域</div>
					<el-carousel height="42px" :autoplay="false" indicator-position="none">
						<el-carousel-item v-for="item in (region.length/3)" :key="item">
							<el-row :gutter="10" style="font-size: 14px;">
								<el-col :span="8" style="height: 42px;text-align: center;" v-for="item2 in 3">
									<a href="javascript:;" style="text-decoration:none;" @click="destinationSelect(region[item2*item-1])">
										<div
											style="line-height: 40px;background-color: #FFFFFF;border: 1px solid rgb(0, 0, 0,0.1);border-radius: 5px;color: #989898;">
											{{region[item2*item-1]}}
										</div>
									</a>
								</el-col>
							</el-row>
						</el-carousel-item>
					</el-carousel>
				</div>



				<div>
					<div style="margin-bottom: 10px;margin-top: 20px;font-size: 15px;">热门出游主题</div>
					<el-carousel height="42px" :autoplay="false" indicator-position="none">
						<el-carousel-item v-for="item in themeIndex" :key="item">
							<el-row :gutter="10" style="font-size: 14px;">
								<el-col :span="8" style="height: 42px;text-align: center;" v-for="item2 in themeNumber(item,theme)">
									<a href="javascript:;" style="text-decoration:none;" @click="destinationSelect(theme[item2*item-1].theme_name)">
										<div
											style="line-height: 40px;background-color: #FFFFFF;border: 1px solid rgb(0, 0, 0,0.1);border-radius: 5px;color: #989898;">
											<span v-html="theme[item2*item-1].svg"></span>
											<span style="margin-left: 7px;">{{theme[item2*item-1].theme_name}}</span>
										</div>
									</a>
								</el-col>
							</el-row>
						</el-carousel-item>
					</el-carousel>
				</div>

				<div style="margin-top: 20px;">

					<div style="margin-top: 10px;">
						<div
							style="background-color: #FFFFFF;border: rgb(0, 0, 0,0.1) 1px solid;height: 70px;border-radius: 5px;">
							<el-row>
								<el-col :span="12" :class="cityNameIs ? 'borderTop' : ''" id="cityName"
									style="border-right: 1px solid rgb(0, 0, 0,0.1);">
									<div @click="cityNameIs=!cityNameIs" :class="cityNameIs ? 'moveUp' : 'move'">
										<span style="font-size: 12px;color: #989898;">出发地</span>
										<div>
											<span style="font-size: 15px;font-weight: 900;">
												{{cityName.city_name}}
											</span>
										</div>
									</div>

									<div v-if="cityNameIs"
										style="height:300px;width:600px;background-color: #FFFFFF;position:absolute;border: rgb(0, 0, 0,0.1) 1px solid;border-radius: 5px;padding: 20px;z-index: 900;">
										<el-tabs>
											<el-tab-pane label="全中国">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="checkAbc(item.name)"
														style="margin-bottom: 10px;">
														<div style="margin-bottom: 5px;font-size: 13px;color: #989898;">
															{{item.name}}:
														</div>
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="美洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='美洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="欧洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='欧洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="大洋洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='大洋洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="亚洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='亚洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="非洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='非洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="departureSelection(item2)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
										</el-tabs>
									</div>
								</el-col>
								<el-col :span="12" :class="cityNameTwoIs ? 'borderTop' : ''" id="cityNameTwo">
									<div @click="cityNameTwoIs=!cityNameTwoIs"
										:class="cityNameTwoIs ? 'moveUp' : 'move'">
										<span style="font-size: 12px;color: #989898;">出发地</span>
										<div>
											<el-row>
												<span v-for="item in cityNameTwo">
													<span
														v-if="item==='全中国' || item==='美洲' || item==='欧洲' || item==='非洲' || item==='大洋洲' || item==='亚洲'"
														style="font-size: 15px;font-weight: 900;">
														{{item}}
													</span>


													<el-col :span="7" v-else
														style="font-size: 15px;background-color: rgb(114, 201, 255,0.2);margin-right: 5px;">

														<span>
															{{cityNameIntercept(item)}}
														</span>

														<a href="javascript:;"
															style="text-decoration:none;color: black;"
															@click="deleteSelect(item)">
															<span style="font-size: 12px;color: #a8a8a8;">
																X
															</span>
														</a>
													</el-col>

												</span>
											</el-row>
										</div>
									</div>

									<div v-if="cityNameTwoIs"
										style="height:300px;width:600px;background-color: #FFFFFF;position:absolute;border: rgb(0, 0, 0,0.1) 1px solid;border-radius: 5px;padding: 20px;z-index: 900;">
										<el-tabs>
											<el-tab-pane label="全中国">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="checkAbc(item.name)"
														style="margin-bottom: 10px;">
														<div style="margin-bottom: 5px;font-size: 13px;color: #989898;">
															{{item.name}}:
														</div>
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="美洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='美洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="欧洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='欧洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="大洋洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='大洋洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="亚洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='亚洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="非洲">
												<div style="height:260px;overflow: scroll;">
													<div v-for="item in cityList" v-if="item.name==='非洲'"
														style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																v-for="item2 in item.data"
																@click="destinationSelect(item2.city_name)">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	{{item2.city_name}}
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
											<el-tab-pane label="区域">
												<div style="height:260px;overflow: scroll;">
													<div style="margin-bottom: 10px;">
														<el-row>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('全中国')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	全中国
																</el-col>
															</a>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('美洲')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	美洲
																</el-col>
															</a>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('亚洲')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	亚洲
																</el-col>
															</a>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('非洲')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	非洲
																</el-col>
															</a>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('欧洲')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	欧洲
																</el-col>
															</a>
															<a href="javascript:;"
																style="text-decoration:none;color: black;"
																@click="destinationSelect('大洋洲')">
																<el-col :span="3" class="col"
																	style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
																	大洋洲
																</el-col>
															</a>
														</el-row>
													</div>
												</div>
											</el-tab-pane>
										</el-tabs>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>

				<div style="margin-top: 10px;">
					<div
						style="background-color: #FFFFFF;border: rgb(0, 0, 0,0.1) 1px solid;height: 70px;border-radius: 5px;padding-bottom: 10px;">
						<div style="margin: 10px;">
							<span style="font-size: 12px;color: #989898;">出发日期</span>
							<div>
								<el-date-picker v-model="date" type="daterange" range-separator="~" start-placeholder=""
									end-placeholder="" :picker-options="forbiddenStartTime"
									style="width: 100%;border: none;">
								</el-date-picker>
							</div>
						</div>
					</div>
				</div>
			</div>



			<div
				style="width: 450px; height: 60px;background-color: #FFFFFF;position:absolute;right: -460px;top: 10px;box-shadow: 0px 0px 15px rgba(0, 0, 0,0.2);border-radius: 5px;">
				<div class="block">
					<el-row>
						<el-col :span="6" style="line-height: 60px;text-align: right;">
							<span style="font-size: 15px;">价格预算 :</span>
						</el-col>
						<el-col :span="18" style="padding-left: 20px;padding-right: 50px;">
							<el-row style="margin-top: 10px;">
								<el-col :span="12">
									<div style="text-align: left;margin-left: -10px;font-weight: 900;font-size: 15px;">
										￥{{priceMin}}
									</div>
								</el-col>
								<el-col :span="12">
									<div
										style="text-align: right;margin-right: -10px;font-weight: 900;font-size: 15px;">
										￥{{priceMax}}
									</div>
								</el-col>
							</el-row>
							<el-slider @input="priceChange" :show-tooltip="false" :key="renew" range :max="price[1]" :min="price[0]"
								style="margin-top: -5px;"></el-slider>
						</el-col>
					</el-row>
				</div>
			</div>


			<div style="margin-bottom: 20px;color: #a8a8a8;padding-left: 20px;padding-right: 20px;">
				为您推荐
			</div>

			<div id="information"
				style="background-color: #FFFFFF;padding-left: 20px;padding-right: 20px;height: 400px;overflow: scroll;">

				<div v-if="flight.length>0">
					<div v-for="item in flight" @mouseover="arc(item.city.lng,item.city.lat)"
						@mouseleave="cancellationArc()"
						style="background-color: #FFFFFF;padding: 10px;border: 1px solid rgb(163, 163, 163,0.2);margin-bottom: 10px;border-radius: 7px;">
						
						<el-row :gutter="10">
							<el-col :span="7">
								<el-image style="height: 100px;border-radius: 5px;" :src="item.src"
									fit="cover"></el-image>
							</el-col>
							<el-col :span="17">
								<el-row>
									<el-col :span="24" style="text-align: left;">
										<span style="font-weight: 900;font-size: 18px;">{{item.city.city_name}}</span>
										<span style="font-size: 16px;margin-left: 5px;color: #a8a8a8;"
											v-if="checkAbc(item.city.letter)">中国</span>
										<span style="font-size: 16px;margin-left: 5px;color: #a8a8a8;"
											v-else>item.city.letter</span>
										<a href="javascript:;" style="text-decoration:none;" @click="switchSearch(item.city.city_name,item.flight[0].departure)">
											<span style="float: right;font-weight: 900;color: rgba(0, 170, 255);">更多航班</span>
										</a>
									</el-col>
									<el-col :span="24" style="text-align: left;margin-top: 10px;"
										v-for="(item2,index) in item.flight">
										<hr v-if="index>0"
											style="margin-bottom: 10px;border: none;border-top: rgb(163, 163, 163,0.2) 1px solid;">
										<el-row>
											<el-col :span="12" style="text-align: left;">
												{{dateNow(item2.departure)[1]}} {{dateNow(item2.departure)[0]}}去
											</el-col>
											<el-col :span="12" style="text-align: right;font-weight: 900;color: #ff9900;">
												￥{{item2.flightPrice.economy_price}}
											</el-col>
										</el-row>
									</el-col>
									
									<el-col :span="24" style="text-align: left;margin-top: 10px;" v-if="item.flight.length===1">
										<hr
											style="margin-bottom: 10px;border: none;border-top: rgb(163, 163, 163,0.2) 1px solid;">
										<div 
											style="color: #989898;">
											暂时没有更多单程航班数据
										</div>
									</el-col>
									
								</el-row>
							</el-col>
						</el-row>
						
					</div>
				</div>
				

				<div v-if="flight.length===0">
					<el-empty description="没有查到航班"></el-empty>
				</div>
			</div>
		</div>


		<baidu-map :center="center" class="baiduMap" @ready="handler" :key="renew">
			<bml-curve-line :points="points" :editing="true" strokeStyle="dashed" :strokeWeight="3"></bml-curve-line>

			<bm-overlay pane="labelPane" @draw="draw" class="sample">
				<div style="background: rgba(0, 170, 255);padding: 5px;">
					<svg width="25" height="25" viewBox="0 0 48 48" fill="none">
						<path
							d="M22 29L13.7763 33.1118C12.6994 33.6503 11.4049 33.4927 10.4886 32.7117L4 27.1808L7.56226 25.8157C8.19869 25.5718 8.8992 25.5519 9.54846 25.7592L12.8273 26.8063C13.5787 27.0463 14.3944 26.9807 15.0977 26.6237L37.36 15.3248C37.7807 15.1113 38.2459 15 38.7177 15H44L42.4472 18.1056C42.1569 18.6862 41.6862 19.1569 41.1056 19.4472L32 24"
							stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M22.0007 29L18.0003 31L23.0003 41L32.0003 24" stroke="#fff" stroke-width="4"
							stroke-linecap="round" stroke-linejoin="round" />
						<path d="M17 25L12 16L28 20" stroke="#fff" stroke-width="4" stroke-linecap="round"
							stroke-linejoin="round" />
					</svg>
				</div>
				<div align="center">
					<div
						style="width: 0;height: 0;border-top: 7px solid rgba(0, 170, 255);border-left: 7px solid transparent;border-right: 7px solid transparent;">
					</div>
				</div>
			</bm-overlay>

			<bm-overlay pane="labelPane" @draw="drawtwo($event,item.city.lng,item.city.lat)" class="sample"
				v-for="item in flight" @mouseover.native="arc(item.city.lng,item.city.lat)" v-show="item.show"
				@mouseleave.native="cancellationArc()">
				<div
					style="width: 70px;height: 40px;background-color: rgba(0, 170, 255);padding-top: 5px;padding-bottom: 5px;color: #FFFFFF;">
					<div style="text-align: center;font-weight: 900;font-size: 14px;">
						￥{{item.flight[0].flightPrice.economy_price}}
					</div>
					<div style="font-size: 12px;text-align: center;font-weight: 900;">
						{{item.city.city_name}}
					</div>
				</div>
				<div align="center">
					<div
						style="width: 0;height: 0;border-top: 7px solid rgba(0, 170, 255);border-left: 7px solid transparent;border-right: 7px solid transparent;">
					</div>
				</div>
			</bm-overlay>


		</baidu-map>
	</div>
</template>

<script>
	import $, {
		data
	} from "jquery"
	import Navigation from "../components/Navigation"
	import {
		BmlCurveLine
	} from 'vue-baidu-map'
	import axios from 'axios';

	export default {
		created() {

			var cityName = sessionStorage.getItem("cityNameMap");
			if (cityName != null && cityName != undefined) {
				this.cityName = JSON.parse(cityName);
				this.preventIndex += 1;
			}

			this.center.lng = this.cityName.lng;
			this.center.lat = this.cityName.lat;

			var cityNameTwo = sessionStorage.getItem("cityNameTwoMap");
			if (cityNameTwo != null && cityNameTwo != undefined) {
				this.cityNameTwo = JSON.parse(cityNameTwo);
				this.preventIndex += 1;
			}

			var date = sessionStorage.getItem("dateMap");
			if (date != null && date != undefined) {
				this.date = JSON.parse(date);
			} else {
				var start = new Date();
				start.setTime(start.getTime() + 1 * 24 * 60 * 60 * 1000)
				var end = new Date();
				end.setTime(end.getTime() + 30 * 24 * 60 * 60 * 1000)
				this.date = [start, end];
				sessionStorage.setItem("dateMap", JSON.stringify([start, end]))
			}

			var cityData = sessionStorage.getItem("city");
			if (cityData != null) {
				this.cityList = JSON.parse(cityData);
				this.flightMap();
			} else {
				var nameContainer = {};
				axios.post("api/CityAction/cityList")
					.then((res) => {
						if (res.data.code === 200) {
							var cityArray = res.data.data;
							for (var i = 0; i < cityArray.length; i++) {
								if (nameContainer[cityArray[i].letter] == null) {
									nameContainer[cityArray[i].letter] = {
										"name": cityArray[i].letter,
										"data": []
									}
									nameContainer[cityArray[i].letter].data.push(cityArray[i]);
								} else {
									nameContainer[cityArray[i].letter].data.push(cityArray[i]);
								}
							}
							sessionStorage.setItem('city', JSON.stringify(nameContainer));
							this.cityList = nameContainer;
							this.flightMap();
						}
					});
			}
			
			
			axios.post("api/ThemeAction/wholeTheme")
				.then((res) => {
					if (res.data.code === 200) {
						if (res.data.data != undefined) {
							var data=res.data.data;
							this.theme=data;
							if(data.length<=3){
								this.themeIndex=1;
							}else{
								this.themeIndex=parseInt(data.length/3)+parseInt(data.length%3);
							}
						}
					}
				});

		},
		watch: {
			date: {
				handler(newVal) {
					sessionStorage.setItem("dateMap", JSON.stringify(newVal))
					this.flightMap();
				},
				deep: true
			},
			cityName: {
				handler(newVal) {
					this.center.lng = newVal.lng;
					this.center.lat = newVal.lat;
					sessionStorage.setItem("cityNameMap", JSON.stringify(newVal))
					this.flightMap();
				},
				deep: true
			},
			cityNameTwo: {
				handler(newVal) {
					sessionStorage.setItem("cityNameTwoMap", JSON.stringify(newVal))
					this.flightMap();
				},
				deep: true
			}
		},
		components: {
			BmlCurveLine,
			Navigation
		},
		data() {
			return {
				center: {
					lng: 113.08755,
					lat: 28.25182
				},
				points: [

				],
				active: false,
				price: [0, 0],
				priceMin: 0,
				priceMax: 0,
				cityList: [],
				cityName: {
					city_name: "长沙",
					superior: "0",
					lng: "113.08755",
					letter: "C",
					lat: "28.25182 ",
					city_id: 208
				},
				cityNameIs: false,
				cityNameTwo: ['全中国'],
				cityNameTwoIs: false,
				date: "",
				dateCopy:[],
				forbiddenStartTime: {
					disabledDate: this.selectTime,
				},
				renew: new Date().getTime(),
				flight: [],
				flightIs: 1,
				preventIndex: 1,
				region:["全中国","亚洲","欧洲","美洲","非洲","大洋洲"],
				theme:[],
				themeIndex:0
			}
		},
		methods: {
			flightMap() {

				if (this.flightIs !== 1) {
					if (this.preventIndex !== 0) {
						this.preventIndex -= 1;
						return;
					}
				} else {
					this.flightIs += 1;
				}


				var jsonObject = {
					"departure": this.cityName.city_name,
					"destination": this.cityNameTwo,
					"start": this.timeExtraction(new Date(this.date[0])),
					"end": this.timeExtraction(new Date(this.date[1])),
				};

				axios.post("api/FlightAction/flightMap", JSON.stringify(jsonObject), {
						headers: {
							'Content-Type': 'application/json'
						}
					})
					.then((res) => {
						if (res.data.code === 200) {
							if (res.data.data != undefined) {
								var data = res.data.data;
								
								this.priceMin=0;
								this.priceMax=0;
								this.price=[0,0];
							
								for(var i=0;i<data.length;i++){
									
									data[i].src = require("../static/img/cityImg/" + data[i].city.city_name + ".png");
									
									var flightData=data[i].flight;
									data[i].show=true;
									for(var b=0;b<flightData.length;b++){
										if(flightData[0].flightPrice.economy_price>this.price[1]){
											this.price[1]=flightData[b].flightPrice.economy_price;
										}
										if(this.price[0]===0){
											this.price[0]=flightData[b].flightPrice.economy_price;
										}else if(flightData[b].flightPrice.economy_price<this.price[0]){
											this.price[0]=flightData[b].flightPrice.economy_price;
										}
									}
								}
								
								this.priceMin=this.price[0];
								this.priceMax=this.price[1];
								
								
								this.flight = data;
								this.dateCopy=data;
								this.renew = new Date().getTime();
							} else {
								this.dateCopy=[];
								this.flight = [];
								this.renew = new Date().getTime();
							}
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>' + res.data.msg + '</strong>',
								type: 'error'
							});
						}
					})
			},
			themeNumber(index,theme){
				var number=theme.length-(index-1)*3;
				if(number>=3){
					return 3;
				}else{
					return number;
				}
			},
			timeExtraction(date) {
				var time = date;
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				return Y + "-" + M + "-" + d;
			},
			draw({
				el,
				BMap,
				map
			}) {
				const pixel = map.pointToOverlayPixel(new BMap.Point(this.center.lng, this.center.lat))
				el.style.left = pixel.x - 17 + 'px'
				el.style.top = pixel.y - 50 + 'px'
			},
			drawtwo(event, lng, lat) {
				var el = event.el;
				var map = event.map;
				const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
				el.style.left = pixel.x - 35 + 'px'
				el.style.top = pixel.y - 62 + 'px'
			},
			handler({
				BMap,
				map
			}) {
				map.enableScrollWheelZoom()
				var point = new BMap.Point(this.center.lng, this.center.lat)
				map.centerAndZoom(point, 5);
				// map.disableScrollWheelZoom();

				this.map = map;
			},
			arc(lng, lat) {
				var cre = new Array(2);
				cre[0] = {
					lng: this.center.lng,
					lat: this.center.lat
				};
				cre[1] = {
					lng: lng,
					lat: lat
				};
				this.points = cre;
			},
			cancellationArc() {
				this.points = [];
			},
			priceChange(price) {
				
				if(isNaN(price[0])){
					price[0]=this.priceMin;
					price[1]=this.priceMax;
					return;
				}
				
				this.priceMin = price[0];
				this.priceMax = price[1];

				var data=this.flight;
				
				for(var i=0;i<data.length;i++){
					var flightData=data[i].flight;
					if(flightData[0].flightPrice.economy_price>=this.priceMin && flightData[0].flightPrice.economy_price<=this.priceMax){
						data[i].show=true;
					}else{
						data[i].show=false;
					}
				}
			},
			checkAbc(name) {
				var reg = /^[A-Za-z]+$/;
				return reg.test(name);
			},
			closeSel(event) {
				var cityName = document.getElementById("cityName");
				var cityNameTwo = document.getElementById("cityNameTwo");
				if (cityName) {
					if (!cityName.contains(event.target)) {
						this.cityNameIs = false;
					}
				}

				if (cityNameTwo) {
					if (!cityNameTwo.contains(event.target)) {
						this.cityNameTwoIs = false;
					}
				}
			},
			departureSelection(cityName) {
				this.cityName = cityName;
			},
			deleteSelect(cityName) {
				var citySet = new Set();
				if (this.cityNameTwo.length <= 1) {
					citySet.add("全中国");
					this.cityNameTwo = [...citySet];
				} else {
					var cityNameTwo = this.cityNameTwo;
					for (var i = 0; i < cityNameTwo.length; i++) {
						if (cityNameTwo[i] !== cityName) {
							citySet.add(cityNameTwo[i]);
						}
					}
					this.cityNameTwo = [...citySet];
				}
			},
			destinationSelect(cityName) {
				var citySet = new Set();
				if (cityName === '全中国' || cityName === '美洲' || cityName === '欧洲' || cityName === '非洲' || cityName ===
					'大洋洲' || cityName === '亚洲') {
					citySet.add(cityName);
					this.cityNameTwo = [...citySet]
				} else {
					if (this.cityNameTwo.length >= 3) {
						return;
					}
					
					var cityNameTwo = this.cityNameTwo;
					for (var i = 0; i < cityNameTwo.length; i++) {
						if (cityNameTwo[i] !== '全中国' && cityNameTwo[i] !== '美洲' && cityNameTwo[i] !== '欧洲' && cityNameTwo[
								i] !== '非洲' && cityNameTwo[i] !==
							'大洋洲' && cityNameTwo[i] !== '亚洲') {
							citySet.add(cityNameTwo[i]);
						}
					}

					citySet.add(cityName);
					this.cityNameTwo = [...citySet];
				}
			},
			cityNameIntercept(cityName) {
				if (cityName.length > 3) {
					return cityName.slice(0, 2) + "...";
				}
				return cityName;
			},
			selectTime(time) {
				return time.getTime() < Date.now();
			},
			dateNow(date) {
				var time = new Date(date);
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array("周" + week[time.getDay()], M + "-" + d);
			},
			switchSearch(cityName,date){
				sessionStorage.setItem("cityNameTwo",cityName);
				sessionStorage.setItem("cityName",this.cityName.city_name);
				sessionStorage.setItem("departureDate",this.dateNowTwo(new Date(date),1));
				sessionStorage.setItem("returnDate",this.dateNowTwo(new Date(date),0));
				location.href="/Search";
			},
			dateNowTwo(date,isday) {
				var time = date;
				if (isday == 0) time.setTime(time.getTime() + 1 * 24 * 60 * 60 * 1000);
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array(Y + "-" + M + "-" + d, "星期" + week[time.getDay()], time, M + "-" + d);
			}
		}
	}
</script>

<style>
	.baiduMap {
		width: 100%;
		height: calc(100vh - 70px);
	}


	.sample {
		position: absolute;
	}

	.col:hover {
		color: #00ABFF;
		background-color: rgb(0, 171, 255, 0.1);
	}

	.borderTop {
		border-top: #00ABFF 3px solid;
	}

	.moveUp {
		margin-top: 7px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.move {
		margin: 10px;
	}
	
	.el-input__icon{
		display: none !important;
	}
</style>